<template>
  <ContentWrap>
    <!-- 搜索工作栏 -->
    <el-form
      class="-mb-15px"
      :model="queryParams"
      ref="queryFormRef"
      :inline="true"
      label-width="68px"
    >
      <el-form-item label="供应商名称" prop="name">
        <el-input
          v-model="queryParams.name"
          placeholder="请输入供应商名称"
          clearable
          @keyup.enter="handleQuery"
          class="!w-240px"
        />
      </el-form-item>
      <el-form-item label="供应商分类编码" label-width="110px" prop="supplierClassCode">
        <el-select
          v-model="queryParams.supplierClassCode"
          placeholder="请选择供应商分类编码"
          clearable
          class="!w-240px"
        >
          <el-option
        v-for="item in classList"
        :key="item"
        :label="item"
        :value="item" />
        </el-select>
      </el-form-item>
      <el-form-item label="国家地区" prop="country">
        <el-input
          v-model="queryParams.country"
          placeholder="请输入国家地区"
          clearable
          @keyup.enter="handleQuery"
          class="!w-240px"
        />
      </el-form-item>
      <el-form-item>
        <el-button @click="handleQuery" type="primary"> 查询</el-button>
        <el-button
          @click="resetQuery"
          style="background-color: transparent; border: 1px solid #409eff; color: #409eff"
          plain
          type="primary"
        >
          重置</el-button
        >
      </el-form-item>
    </el-form>

    <!-- 操作按钮行 -->
    <div class="mb-15px" style="margin-top: 10px">
      <el-button
        type="primary"
        @click="openForm('create')"
        v-hasPermi="['business:supplier-info:create']"
      >
        新增
      </el-button>
      <el-button
        style="background-color: transparent; border: 1px solid #409eff; color: #409eff"
        plain
        type="primary"
        @click="handleBatchDelete"
        v-hasPermi="['business:supplier-info:delete']"
        :disabled="selectedIds.length === 0"
      >
        删除
      </el-button>
    </div>
  </ContentWrap>

  <!-- 列表 -->
  <ContentWrap>
    <el-table
      v-loading="loading"
      :data="list"
      :stripe="true"
      :show-overflow-tooltip="true"
      :header-cell-style="{
        'background-color': '#f2f2f2',
        color: '#333'
      }"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" />
      <el-table-column type="index" align="center" label="序号" width="60px" />
      <el-table-column label="供应商编号" align="center" prop="code" />
      <!-- <el-table-column label="供应商名称" align="center" prop="name" /> -->
      <el-table-column label="供应商名称" align="center" prop="name">
        <template #default="scope">
          <el-link type="primary" @click="handleSupplierNameClick(scope.row)">
            {{ scope.row.name }}
          </el-link>
        </template>
      </el-table-column>
      <el-table-column label="供应商分类" align="center" prop="supplierClassCode" />
      <el-table-column label="经营范围" align="center" prop="range" />
      <el-table-column label="企业规模" align="center" prop="scale" />
      <el-table-column label="国家地区" align="center" prop="country" />
      <el-table-column label="备注" align="center" prop="remark" />
    </el-table>
    <!-- 分页 -->
    <Pagination
      :total="total"
      v-model:page="queryParams.pageNo"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </ContentWrap>

  <!-- 表单弹窗：添加/修改 -->
  <SupplierInfoForm ref="formRef" @success="getList" />
</template>

<script setup lang="ts">
import { dateFormatter } from '@/utils/formatTime'
import download from '@/utils/download'
import { SupplierInfoApi, SupplierInfoVO } from '@/api/busipart/supplierinfo'
import SupplierInfoForm from './SupplierInfoForm.vue'

import { useRouter } from 'vue-router'

const router = useRouter()

// 添加处理供应商名称点击的方法
const handleSupplierNameClick = (row: SupplierInfoVO) => {
  router.push({
    path: '/busipart/supplierinfo/detail', // 根据实际路由路径调整
    query: {
      id: row.id
    }
  })
}

/** 供应商管理 列表 */
defineOptions({ name: 'SupplierInfo' })

const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化

const loading = ref(true) // 列表的加载中
const list = ref<SupplierInfoVO[]>([]) // 列表的数据
const total = ref(0) // 列表的总页数
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  name: undefined,
  supplierClassCode: undefined,
  country: undefined
})
const queryFormRef = ref() // 搜索的表单
const exportLoading = ref(false) // 导出的加载中
const selectedIds = ref<number[]>([]) // 选中的ID列表
let classList= []
/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    classList = await SupplierInfoApi.getClassList()
    
    const data = await SupplierInfoApi.getSupplierInfoPage(queryParams)
    list.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}

/** 处理选中项变化 */
const handleSelectionChange = (selection: SupplierInfoVO[]) => {
  selectedIds.value = selection.map((item) => item.id)
}

/** 批量删除操作 */
const handleBatchDelete = async () => {
  try {
    // 删除的二次确认
    await message.confirm(`确定删除选中的 ${selectedIds.value.length} 条数据吗？`, '提示')

    // 循环删除选中的项
    for (const id of selectedIds.value) {
      try {
        await SupplierInfoApi.deleteSupplierInfo(id)
      } catch (error) {
        console.error(`删除ID为 ${id} 的记录失败:`, error)
      }
    }

    message.success(t('common.delSuccess'))
    // 刷新列表
    await getList()
    selectedIds.value = [] // 清空选中项
  } catch {
    // 用户取消删除
  }
}

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value.resetFields()
  handleQuery()
}

/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string, id?: number) => {
  formRef.value.open(type, id)
}

/** 导出按钮操作 */
const handleExport = async () => {
  try {
    // 导出的二次确认
    await message.exportConfirm()
    // 发起导出
    exportLoading.value = true
    const data = await SupplierInfoApi.exportSupplierInfo(queryParams)
    download.excel(data, '供应商管理.xls')
  } catch {
  } finally {
    exportLoading.value = false
  }
}

/** 初始化 **/
onMounted(() => {
  getList()
})
</script>
